<script setup lang="ts">
import Header from '@/components/layout/header/Header.vue';
import Footer from '@/components/layout/footer/Footer.vue';
import PlayList from '@/components/layout/PlayList.vue';
import Popup from '@/components/layout/Popup.vue';

</script>

<template>
	<el-container class="my-container">
		<el-header class="header"><Header/></el-header>
		<el-main class="main">
			<div class="container">
				<router-view v-slot="{ Component }">
					<keep-alive :include="['dynamic', 'video']">
						<component :is="Component" />
					</keep-alive>
				</router-view>
			</div>
		</el-main>
		<el-footer class="footer">
			<Footer />
			<PlayList />
			<Popup />
		</el-footer>
	  </el-container>
</template>

<style lang="less">
.module {
	display: flex;
	justify-content: space-between;
	height: 100%;
	background: #f9fafb;
	.module-left {
		//min-width: 270px;
		//padding-top: 30px;
		padding-bottom: 20px;
		.module-menu {
			padding: 0 20px;
			.menus-title {
				font-size: 12px;
				margin: 20px 0 10px 0;
			}
			.menus-item {
				margin: 6px 0;
				cursor: pointer;
				& > a {
					padding: 6px 20px;
					display: flex;
					font-size: 14px;
					align-items: center;

					> span {
						display: flex;
						align-items: center;
						margin-right: 5px;
					}
				}
				&:hover:not(.active) {
					background-color: #f4f2f2;
				}
			}

			.active {
				background: #39c6ad;
				color: #fff;
				border-radius: 5px;
				a {
					color: #fff;
				}
			}
		}
	}
	.module-main {
		flex: 1;
		background: #fff;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.main {
			flex: 1;
			box-sizing: border-box;
			padding: 30px 50px 20px;
			.container {
				margin-left: auto;
				margin-right: auto;
			}
			h1 {
				font-size: 30px;
				margin-bottom: 10px;
			}
		}
	}
}
.my-container {
	height: 100vh;
	overflow: hidden;

	.header {
		width: 1200px;
		height: 90px;
		overflow: hidden;
		padding: 0;
		margin: auto;
	}

	.main {
		height: calc(100vh - 180px);
		box-sizing: border-box !important;
		&::-webkit-scrollbar {
			width: 0;
		}
		background: linear-gradient(to bottom, #f7f3f3 0%, #fff 50%,  #f7f3f3 100%);
	}

	.container {
		margin: auto;
		width: 1200px;
		padding: 15px 0;
	}
	.footer {
		width: 1200px;
		margin: auto;
		padding: 0;
		height: 90px;
	}
}
.layout{
	margin: auto;
	width: 80vw;
}
</style>